'use client'

import { useEffect, useState } from "react";
import { BUG_LEVEL, BUG_PRIORITY, ISSUE_TYPE, IssueInfo, PROCESS_STAGE, ShareInfo, TASK_PRIORITY } from "@/grpc/types";
import { Card, Descriptions, Space, Tag } from "antd";
import { getStateColor, issueState } from "@/utils/issue_utils";
import moment from "moment";

export interface IssuePanelProps {
    shareInfo: ShareInfo;
}

export function IssuePanel(props: IssuePanelProps) {
    const [issueInfo, setIssueInfo] = useState<IssueInfo | null>(null);
    const [errorMsg, setErrorMsg] = useState("");

    const loadIssueInfo = async () => {
        const res = await fetch(`/api/issue/get?id=${props.shareInfo.shareId}&secret=${props.shareInfo.shareSecret}`);
        const resData = await res.json() as {
            code: number;
            errMsg: string;
            info: IssueInfo;
        };
        if (resData.code == 0) {
            setIssueInfo(resData.info);
        } else {
            setErrorMsg(resData.errMsg);
        }
    };

    useEffect(() => {
        loadIssueInfo();
    }, []);

    return (
        <>
            {issueInfo == null && errorMsg != "" && errorMsg}
            {issueInfo != null && (
                <Card title={`${issueInfo.issueType == ISSUE_TYPE.ISSUE_TYPE_TASK ? "任务" : "缺陷"}:${issueInfo.basicInfo?.title ?? ""}`}>
                    <Descriptions bordered labelStyle={{ width: "150px" }}>
                        <Descriptions.Item label="当前状态">
                            <div style={{
                                background: `rgb(${getStateColor(issueInfo.state!)} / 20%)`,
                                width: '70px',
                                borderRadius: '50px',
                                textAlign: 'center',
                                color: `rgb(${getStateColor(issueInfo.state!)})`,
                                cursor: "default",
                                paddingLeft: "0px",
                            }}>
                                {issueState[issueInfo.state!].label}
                            </div>
                        </Descriptions.Item>
                        <Descriptions.Item label="处理子阶段">
                            {issueInfo.processStage == PROCESS_STAGE.PROCESS_STAGE_TODO && "未开始"}
                            {issueInfo.processStage == PROCESS_STAGE.PROCESS_STAGE_DOING && "执行中"}
                            {issueInfo.processStage == PROCESS_STAGE.PROCESS_STAGE_DONE && "待检查"}
                        </Descriptions.Item>
                        {issueInfo.issueType == ISSUE_TYPE.ISSUE_TYPE_BUG && (
                            <>
                                <Descriptions.Item label="级别">
                                    {issueInfo.extraBugInfo?.level == BUG_LEVEL.BUG_LEVEL_MINOR && <span style={{ color: "#06C776" }}>提示</span>}
                                    {issueInfo.extraBugInfo?.level == BUG_LEVEL.BUG_LEVEL_MAJOR && <span style={{ color: "#F99B00" }}>一般</span>}
                                    {issueInfo.extraBugInfo?.level == BUG_LEVEL.BUG_LEVEL_CRITICAL && <span style={{ color: "#FB6D17" }}>严重</span>}
                                    {issueInfo.extraBugInfo?.level == BUG_LEVEL.BUG_LEVEL_BLOCKER && <span style={{ color: "#DF0627" }}>致命</span>}
                                </Descriptions.Item>
                                <Descriptions.Item label="软件版本">{issueInfo.extraBugInfo?.softwareVersion ?? ""}</Descriptions.Item>
                                <Descriptions.Item label="优先级">
                                    {issueInfo.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_LOW && <span style={{ color: "#1D85F8" }}>低优先级</span>}
                                    {issueInfo.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_NORMAL && <span style={{ color: "#06C776" }}>正常处理</span>}
                                    {issueInfo.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_HIGH && <span style={{ color: "#F99B00" }}>高度重视</span>}
                                    {issueInfo.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_URGENT && <span style={{ color: "#FB6D17" }}>急需解决</span>}
                                    {issueInfo.extraBugInfo?.priority == BUG_PRIORITY.BUG_PRIORITY_IMMEDIATE && <span style={{ color: "#DF0627" }}>马上解决</span>}
                                </Descriptions.Item>
                            </>
                        )}
                        {issueInfo.issueType == ISSUE_TYPE.ISSUE_TYPE_TASK && (
                            <Descriptions.Item label="优先级">
                                {issueInfo.extraTaskInfo?.priority == TASK_PRIORITY.TASK_PRIORITY_LOW && <span style={{ color: "#1D85F8" }}>低优先级</span>}
                                {issueInfo.extraTaskInfo?.priority == TASK_PRIORITY.TASK_PRIORITY_MIDDLE && <span style={{ color: "#06C776" }}>正常处理</span>}
                                {issueInfo.extraTaskInfo?.priority == TASK_PRIORITY.TASK_PRIORITY_HIGH && <span style={{ color: "#F99B00" }}>高度重视</span>}
                            </Descriptions.Item>
                        )}
                        <Descriptions.Item label="处理人">
                            {(issueInfo.execUserId ?? "") != "" && (
                                <Space>
                                    {issueInfo.execDisplayName ?? ""}
                                </Space>
                            )}
                        </Descriptions.Item>
                        <Descriptions.Item label="验收人">
                            {(issueInfo.checkUserId ?? "") != "" && (
                                <Space>
                                    {issueInfo.checkDisplayName ?? ""}
                                </Space>
                            )}
                        </Descriptions.Item>
                        <Descriptions.Item label="截止时间">
                            {issueInfo.hasDeadLineTime == true && moment(issueInfo.deadLineTime ?? 0).format("YYYY-MM-DD")}
                        </Descriptions.Item>
                        <Descriptions.Item label="预估开始时间">
                            {issueInfo.hasStartTime == true && moment(issueInfo.startTime ?? 0).format("YYYY-MM-DD")}
                        </Descriptions.Item>
                        <Descriptions.Item label="预估结束时间">
                            {issueInfo.hasEndTime == true && moment(issueInfo.endTime ?? 0).format("YYYY-MM-DD")}
                        </Descriptions.Item>
                        <Descriptions.Item label="剩余工时">
                            {issueInfo.hasRemainMinutes == true && ((issueInfo.remainMinutes ?? 0) / 60).toFixed(1) + "小时"}
                        </Descriptions.Item>
                    </Descriptions>
                    <Descriptions bordered column={1} labelStyle={{ width: "150px" }}>
                        <Descriptions.Item label="标签">
                            <Space>
                                {(issueInfo.tagInfoList ?? []).map(tagInfo => (
                                    <Tag key={tagInfo.tagId ?? ""} style={{ backgroundColor: tagInfo.bgColor ?? "" }}>{tagInfo.tagName ?? ""}</Tag>
                                ))}
                            </Space>
                        </Descriptions.Item>
                    </Descriptions>
                </Card>
            )}
        </>
    );
}